<template>
  <div>
    <c-title text="提交申请"></c-title>

    <div class="content">
      <div class="item">
        <span class="require">申请时间</span>
        <div class="right" @click="show_time_popup=true" :class="{'main-color':apply_time}">
          <span>{{apply_for_time}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="item">
        <span class="require">申请人</span>
        <div class="right">
          <van-field v-model="apply_name" placeholder="请输入申请人姓名" input-align="right" />
        </div>
      </div>
      <div class="item">
        <span class="require">所在部门</span>
        <div class="right" @click="show=true">
          <span :class="{'main-color':department_id}">{{fieldValue}}</span>
          <van-icon name="arrow" :class="{'main-color':department_id}" />
        </div>
      </div>
      <div class="item" style="display: flex; flex-direction: column; align-items: baseline;">
        <span class="require" style="margin-bottom: 0.5rem;">事由</span>
        <van-field
          v-model="reason"
          rows="3"
          autosize
          type="textarea"
          placeholder="请输入内容"
          show-word-limit
        ></van-field>
      </div>

      <van-field
        class="item"
        v-model="reward_point"
        :placeholder="`请输入${integral}数`"
        input-align="right"
      >
        <template slot="label">
          <span class="require">奖励{{integral}}</span>
        </template>
      </van-field>
      <p class="tips" v-if="single_max_point">
        <img src="../../../assets/images/staff_approval/tips.png" alt />
        最高不能超过{{single_max_point}}{{integral}}
      </p>
    </div>

    <div class="apply_for" :class="{'w375': fun.isPc()}">
      <van-button color="#E32323" block round @click="handle">申请提交</van-button>
    </div>
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择部门"
        :options="options"
        @close="show = false"
        @change="change"
        @finish="onFinish"
        :field-names="fieldNames"
      />
    </van-popup>
    <van-popup v-model="show_time_popup" position="bottom" round>
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="cancel"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { Cascader } from "vant";
Vue.use(Cascader);
export default {
  data() {
    return {
      fieldNames: {
        text: "name",
        value: "id",
        children: "childs"
      },
      apply_time: "",
      department_id: "",
      show_time_popup: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 12, 31),
      currentDate: new Date(),
      apply_name: "",
      reward_point: "",
      integral: window.localStorage.getItem("integral") || "积分",
      reason: "",
      show: false,
      fieldValue: "请选择",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: []
    };
  },
  computed: {
    apply_for_time() {
      if (this.apply_time == "") {
        return "请选择";
      } else {
        return this.timestampToTime(this.apply_time);
      }
    }
  },
  activated() {
    this.getDepartmentList();
    this.getData();
  },
  methods: {
    change({ value, selectedOptions, tabIndex }) {
      if (selectedOptions[selectedOptions.length - 1].childs && selectedOptions[selectedOptions.length - 1].childs.length == 0) {
        delete selectedOptions[selectedOptions.length - 1].childs;
        this.department_id = value;
        this.fieldValue = selectedOptions.map(option => option.name).join("/");
        this.show = false;
      }
    },
    formatCascader(data) {
      data.forEach(item => {
        if (item.childs && item.childs.length !== 0) {
          this.formatCascader(item.childs);
        } else if (item.childs.length == 0) {
          delete item.childs;
        }
      });
      return data;
    },
    getDepartmentList() {
      $http.post("plugin.staff-audit.frontend.audit.getDepartmentList").then(res => {
        if (res.result == 1) {
          this.options = this.formatCascader(res.data);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    //将时间戳转换成正常时间格式
    timestampToTime(timestamp, key) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + M + D;
    },
    getData() {
      $http.post("plugin.staff-audit.frontend.audit.applyPage").then(res => {
        if (res.result == 1) {
          this.single_max_point = res.data.single_max_point;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    handle() {
      let json = {
        apply_name: this.apply_name,
        apply_time: this.apply_time,
        department_id: this.department_id,
        reason: this.reason,
        reward_point: this.reward_point
      };
      $http.post("plugin.staff-audit.frontend.audit.applyAction", json).then(({ result, msg }) => {
        this.$toast(msg);
        if (result) {
          this.$router.push(this.fun.getUrl("StaffApproval"));
        }
      });
    },
    cancel() {
      this.show_time_popup = false;
    },
    confirm(val) {
      this.apply_time = new Date(val).getTime();
      this.show_time_popup = false;
    },
    onFinish({ selectedOptions, value }) {
      this.show = false;
      this.department_id = value;
      this.fieldValue = selectedOptions.map(option => option.name).join("/");
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.cascaderValue = this.department_id;
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.w375 {
  width: 375px;
  left: 50% !important;
  transform: translateX(-50%);
}

::v-deep .van-field__label {
  align-self: end;
  color: #333;
}

::v-deep .van-cell {
  padding: 0;
}

.require {
  position: relative;

  &::after {
    position: absolute;
    right: -8px;
    color: #ee0a24;
    font-size: 14px;
    content: "*";
  }
}

.main-color {
  color: #323233;
}

.tips {
  color: #e32323;
  text-align: left;

  img {
    width: 0.75rem;
    height: 0.75rem;
  }
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
}

.right {
  font-size: 0.75rem;
  color: #ccc;
}

.content {
  padding: 0.5rem 0.75rem;
}

.item {
  width: 100%;
  background: #fff;
  border-radius: 0.5rem;
}

.apply_for {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
}
</style>